﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="TimeEdit#TimeRange" />Time Range</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTimeEdit-1.MinTime">MinTime</a>
        and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTimeEdit-1.MaxTime">MaxTime</a>
        properties to specify an available time range. Our Blazor Time Edit's drop-down will automatically disable (gray out) values that are outside a specified range.
        If a user tries to select an unavailable time value via the roller, the component displays a notification message.
        If a user enters a value outside the range within the edit box, our Blazor Time Edit retains the previously selected time.
    </p>
    <p>
        In this demo, the DevExpress Blazor Time Edit component only allows users to select time values for the current hour.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Time: <b>@TimeValue.ToString(@"hh\:mm\:ss")</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body mw-480">
        <DxTimeEdit @bind-Time="@TimeValue" SizeMode="SizeMode" MinTime="@MinTime" MaxTime="@MaxTime"></DxTimeEdit>
    </div>
</div>

<CodeSnippet_Editor_TimeEdit_MinMaxTime />

@code {
    TimeSpan TimeValue { get; set; } = DateTime.Now.TimeOfDay;
    TimeSpan MinTime { get; set; }
    TimeSpan MaxTime { get; set; }

    protected override void OnInitialized() {
        MinTime = new TimeSpan(TimeValue.Hours, 0, 0);
        MaxTime = new TimeSpan(TimeValue.Hours, 59, 59);
    }
}
